import React, { useState, useEffect } from 'react';
import * as echarts from 'echarts';

export default function Top1() {
  let [data, setDate] = useState([
    1, 0, 11, 10, 2, 22, 9, 1, 1, 0, 1, 4, 1, 2, 1, 3, 18, 4, 1, 0,
  ]);
  function Handle(arr) {
    var myChart = echarts.init(document.querySelector('.echarts2_center2'));
    var option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      tooltip: {
        trigger: 'axis',
        extraCssText: 'width:135px;height:60px;',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      toolbox: {
        show: false,
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: '#000',
            rotate: 45,
          },
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
          data: [
            '安徽省',
            '澳门',
            '北京市',
            '福建省',
            '甘肃省',
            '广东省',
            '广西省',
            '贵州省',
            '海南省',
            '海外',
            '河北省',
            '河南省',
            '黑龙江',
            '湖北省',
            '湖南省',
            '吉林省',
            '江苏省',
            '江西省',
            '辽宁省',
            '内蒙古',
          ],
        },
      ],
      yAxis: {
        type: 'value',
        name: '客户数量',
        nameGap: 30,
        nameTextStyle: {
          fontWeight: 'bolder',
          color: '#000',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000',
          },
        },
      },
      dataZoom: [
        {
          type: 'inside',
          show: true,
          // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
          start: 0,
          // 数据窗口范围的结束百分比。范围是：0 ~ 100。
          end: 100,
          // zoomOnMouseWheel: 'ctrl',
          // 第一个 dataZoom 组件
          xAxisIndex: [0, 2], // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
        },
      ],
      series: [
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
            color: 'rgb(232,86,71)',
          },
          label: {
            show: true,
            position: 'top',
          },
          areaStyle: {
            opacity: 0.8,
            color: 'rgb(238,129,118)',
          },

          emphasis: {
            focus: 'series',
          },
          data: arr,
        },
      ],
    };
    myChart.setOption(option);
  }
  //颜色对象
  function Colors() {
    let r = Math.floor(Math.random() * 255);
    let g = Math.floor(Math.random() * 255);
    let b = Math.floor(Math.random() * 255);
    let color = 'rgb(' + r + ',' + g + ',' + b + ')';
    return color;
  }
  useEffect(() => {
    let arr = [];
    for (let i = 0; i <= data.length; i++) {
      arr.push({
        value: data[i],
        itemStyle: {
          color: Colors(),
        },
      });
    }
    Handle(arr);
  }, []);

  return <div className="echarts2_center2" style={{}}></div>;
}
